<template>
    <div>
         <el-upload
            class="upload-demo"
            drag
            :show-file-list="false"
            :http-request="upload"
            :on-success="success"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                上传文件
            </div>
            <template #tip>
           
            </template>
        </el-upload>

        <el-upload
            class="upload-demo"
            drag
            :show-file-list="false"
            :http-request="uploadIn"
            :on-success="success"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                接口文件
            </div>
            <template #tip>
           
            </template>
        </el-upload>
        <div class="address"><el-button type="primary" @click="uploadInConfig">测试配置</el-button></div>
        
        <div class="address" v-for="(item, idx) in urlList" :key="idx">访问地址：{{item || '暂无'}}</div>
    </div>
</template>

<script lang="ts" setup>
import type {
  UploadUserFile,
  UploadRequestHandler,
  UploadFile,
  UploadFiles,
  UploadRequestOptions,
} from "element-plus";
import { upload as uploadFile } from "@/utils/minio-upload-tools";
import toolsApi from '@/api/toolsApi'
const urlList = ref([])
const filePath = ref('marketing-center/')

const upload: UploadRequestHandler = ({ file }: UploadRequestOptions) => {
    // debugger
    console.log('[ file ]', file)
  return new Promise(async (resolve, reject) => {
    try {
      const result: any = await uploadFile(file, filePath.value);
      console.log('[ result ]',result)
      ElMessage.success('上传成功')
      urlList.value.push(result.url as never)
    } catch (e) {
      reject();
    }
  });
};
const uploadInConfig = async() => {
    let rs:any = await toolsApi.getUploadConfig()
    if(rs.code === 200) {
      console.log('[ rs ]', rs)
    }
};

const uploadIn = async(file: { file: string | Blob; }) => {
    // debugger
    console.log('[ file ]', file)
    let formData = new FormData();
    formData.append("file", file.file);
    let rs:any = await toolsApi.interfaceUpload(formData)
    if(rs.code === 200) {
      console.log('[ rs ]', rs)
    }

};

const success = (
  response: any,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log('[ uploadFiles ]', uploadFiles)
  let fileList = uploadFiles.map((file: any) => {
    return { name: file.name, url: file.response.url };
  });
   console.log('[ fileList ]', fileList)
};
</script>

<style lang="scss" scoped>
:deep(.el-upload) {
    width: 50%;
    margin: 30px auto;
}
.address {
    width: 50%;
    margin: 30px auto;
    text-align: left;
}

.mr-20 {
  margin-right: 20px;
} 
</style>